import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import styles from "./List.module.css";
import img1 from "../../public/1.jpg"
import img2 from "../../public/2.jpg"
import img3 from "../../public/3.jpg"
import img4 from "../../public/4.jpg"
import { LeftOutlined } from "@ant-design/icons"
import { RightOutlined } from "@ant-design/icons"
import Logo from "../../public/Logo.png"
import P1 from "../../public/苹果.jpg"
import P2 from "../../public/橙子.jpg"
import P3 from "../../public/迷糊桃.jpg"
import { useNavigate } from "react-router-dom";

export default function Detail() {
    let [data,setData] = useState(useLocation().state)
    let [storage, setStorage] = useState("")
    let changeStorage = (x) => {
        let obj={...data}
        obj.storage = x
        setData(obj)
        setStorage(x)
    }
    let [num, setNum] = useState(1)
    let changeNum = (x) => {
        let obj={...data}
        obj.num = x
        setData(obj)
        setNum(x)
    }
    const imgs = [img1, img2, img3, img4]
    let [imgindex, setImgindex] = useState(0)
    let [selectindex, setSelectindex] = useState(0)
    let nav=useNavigate()
    let goto=()=>{
        nav("/add",{
            state:data
        })
    }
    return (
        <div style={{ width: "1200px", margin: "40px auto" }}>
            <div className={styles.top}>
                <div className={styles.topLeft}>
                    <div style={{ width: "80px", height: "80px", borderRadius: "50%", backgroundColor: "#97cc20", textAlign: "center", lineHeight: "80px", color: "white" }}>
                        Logo
                    </div>
                    <div style={{ fontSize: "30px", marginLeft: "20px", height: "80px", lineHeight: "80px", color: "#97cc3d" }}>
                        生鲜电商
                    </div>
                </div>
                <div className={styles.topRight}>
                    <div className={styles.seabar}>
                        <div>
                            <input type="text" placeholder="请输入搜索内容" style={{ borderColor: "#97cc3d", width: "400px", height: "40px", }} />
                        </div>
                        <div style={{ height: "45px", width: "100px", backgroundColor: "#97cc3d", color: "white", textAlign: "center", lineHeight: "45px" }}>
                            搜索
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.content}>
                <div className={styles.cleft}>
                    <img src={imgs[imgindex]} style={{ width: "300px", height: "300px" }} />
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <button style={{ width: "40px", height: "40px", backgroundColor: "transparent", border: "none" }} disabled={imgindex == 0 ? true : false}>
                            <LeftOutlined style={{ fontSize: "40px" }} onClick={() => setImgindex(imgindex - 1)} />
                        </button>
                        {
                            imgs.map((item, index) => {
                                return (
                                    <div className={styles.swiperItem}>
                                        <img src={item} style={{ width: "40px", height: "40px" }} onMouseEnter={() => setImgindex(index)} />
                                    </div>
                                )
                            })
                        }
                        <button style={{ width: "40px", height: "40px", backgroundColor: "transparent", border: "none" }} disabled={imgindex == 3 ? true : false}>
                            <RightOutlined style={{ fontSize: "40px" }} onClick={() => setImgindex(imgindex + 1)} />
                        </button>
                    </div>
                </div>
                <div className={styles.cright}>
                    <p style={{ fontSize: "25px" }}>{data.name} 品种优良 精心挑选</p>
                    <div style={{ backgroundColor: "#f2f2f2", height: "50px", width: "870px", lineHeight: "50px", fontSize: "25px", color: "red", marginTop: "20px" }}>
                        <span style={{ marginLeft: "20px" }}>￥{data.price + ".00"}/kg</span>
                    </div>
                    <div style={{ marginTop: "20px" }}>
                        <span>选择品种：</span>
                        <span className={styles.tag} style={{ backgroundColor: storage == "常温" ? "#97cc3d" : "" }} onClick={() => changeStorage("常温")}>常温</span>
                        <span className={styles.tag} style={{ backgroundColor: storage == "冷藏" ? "#97cc3d" : "" }} onClick={() => changeStorage("冷藏")}>冷藏</span>
                    </div>
                    <div style={{ marginTop: "40px" }}>
                        <span>选择数量：</span>
                        <span className={styles.tag} style={{ backgroundColor: num == 5 ? "#97cc3d" : "" }} onClick={() => changeNum(5)}>5kg</span>
                        <span className={styles.tag} style={{ backgroundColor: num == 10 ? "#97cc3d" : "" }} onClick={() => changeNum(10)}>10kg</span>
                        <span className={styles.tag} style={{ backgroundColor: num == 15 ? "#97cc3d" : "" }} onClick={() => changeNum(15)}>15kg</span>
                    </div>
                    <div style={{ marginTop: "40px", display: "flex", alignItems: "center" }}>
                        <span>自选数量：</span>
                        <button className={styles.minus} onClick={() => changeNum(num-1)}>-</button>
                        <input type="text" value={num} style={{ width: "100px", height: "36px", marginLeft: "20px", textAlign: "center" }} onInput={(e) => setNum(e.target.value)} />
                        <button className={styles.minus} style={{ marginLeft: "20px" }} onClick={() => changeNum(num+1)}>+</button>
                        <span style={{ marginLeft: "10px" }}>
                            (单位：KG)
                        </span>
                    </div>
                    <div style={{ width: "160px", height: "40px", backgroundColor: "#97cc3d", marginTop: "20px", color: "white", textAlign: "center", lineHeight: "40px" }} onClick={goto}>
                        +加入购物车
                    </div>
                </div>
            </div>
            <div style={{ display: "flex", height: "40px", width: "100%", backgroundColor: "#f2f2f2" }}>
                <span style={{ padding: "10px 20px", color: selectindex == 0 ? "white" : "black", backgroundColor: selectindex == 0 ? "#97cc3d" : "" }} onClick={() => setSelectindex(0)}>
                    商品介绍
                </span>
                <span style={{ padding: "10px 20px", color: selectindex == 1 ? "white" : "black", backgroundColor: selectindex == 1 ? "#97cc3d" : "" }} onClick={() => setSelectindex(1)}>
                    商品评价
                </span>
            </div>
            <div>
                {selectindex == 0 ? <div style={{ marginTop: "40px" }}>
                    <h1 style={{ textAlign: "center" }}>/ 商品详情介绍 /</h1>
                    <p style={{ marginTop: "20px" }}>
                        草莓的甜美在舌尖绽放，仿佛春日的第一缕阳光，带着温暖与希望，轻轻咬下，饱满的果肉瞬间在口中化开，汁水如蜜般流淌，清新而浓郁的果香在唇齿间萦绕，酸甜的滋味恰到好处，既不会过于甜腻，也不会显得寡淡，而是带着一种天然的平衡感，仿佛大自然精心调配的礼物。细腻的果肉柔软得像是云朵，却又带着一丝丝微妙的颗粒感，让人忍不住细细品味，感受它在舌尖上跳跃的欢愉。
                    </p>
                    <div style={{ display: "flex", marginTop: "20px", justifyContent: "space-between" }}>
                        <img src={img1} style={{ width: "500px" }} />
                        <img src={img2} style={{ width: "500px" }} />
                    </div>
                    <p style={{ marginTop: "20px" }}>
                        草莓的甜美在舌尖绽放，仿佛春日的第一缕阳光，带着温暖与希望，轻轻咬下，饱满的果肉瞬间在口中化开，汁水如蜜般流淌，清新而浓郁的果香在唇齿间萦绕，酸甜的滋味恰到好处，既不会过于甜腻，也不会显得寡淡，而是带着一种天然的平衡感，仿佛大自然精心调配的礼物。细腻的果肉柔软得像是云朵，却又带着一丝丝微妙的颗粒感，让人忍不住细细品味，感受它在舌尖上跳跃的欢愉。
                    </p>
                    <div style={{ display: "flex", marginTop: "20px", justifyContent: "space-between" }}>
                        <img src={img3} style={{ width: "500px" }} />
                        <img src={img4} style={{ width: "500px" }} />
                    </div>
                </div> : <div style={{ backgroundColor: "#f4f8ff" }}>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                    <div style={{ backgroundColor: "#ffffff", boxSizing: "border-box", width: "1200px", padding: "20px" }}>
                        <span>小菜******</span>
                        <span style={{ marginLeft: "1000px" }}>2024.1.16</span>
                        <p style={{ color: "gray", marginTop: "5px" }}>水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快的…水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的,非常快，非常快，非常快, 非常快！！！</p>
                        <div style={{marginTop:"25px"}}>
                            <img src={P1} style={{ width: "80px", height: "80px" }} />
                            <img src={P2} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                            <img src={P3} style={{ width: "80px", height: "80px", marginLeft: "20px" }} />
                        </div>
                    </div>
                </div>}
                <div style={{ marginTop: "60px" }}>
                    <img src={Logo} style={{ width: "100%" }} />
                </div>
            </div>
        </div>
    )
}